<template>
	<view class="homeContent" :class="{homeContentstudent:role==1,homeContentparent:role==2}">


		<!-- 搜索框 -->
		<view class="searchContent">
			<navigator class="searchBox" url="/pages/homePackage/search/search">
				<image class="searchIcon" src="https://mp.blrwworkshop.com/imgs/searchIcon.png" mode=""></image>
				<view class="">
					搜索
				</view>
				<view class="searchBtn" :class="{bg_student:role ==1,bg_parent:role==2}">
					搜索
				</view>
			</navigator>

			<navigator class="news_content" url="/pages/homePackage/Announcement/Announcement">
				<image src="https://mp.blrwworkshop.com/imgs/news.png" mode=""></image>
			</navigator>
		</view>

		<!-- banner -->
		<view class="bannnerContent">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" indicator-color="#FFFFFF" indicator-active-color="#FFA116">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image :src="item.carouselUrl" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>


		<!-- 分类 -->
		<view v-if="DistrictList.length>0" class="classification">
			<view class="classItem" v-for="(item,index) in DistrictList" :key="index" @click="handleSubjectList(item)">
				<image :src="item.img" mode=""></image>
				<view class="classItem_name">
					{{item.name}}
				</view>
			</view>
		</view>


		<!-- 我的课程 -->
		<view class="myCourse">
			<view class="CoursetTitle">
				<view class="Title_left">
					<view class="lineIcon" :class="role == 1 ? 'bg_student' : 'bg_parent'"></view>
					<view class="title">
						我的课程
					</view>
				</view>

				<view class="rightimg">
					<image src="https://mp.blrwworkshop.com/imgs/rightIcon.png" mode=""></image>
				</view>
			</view>


			<view v-if="CourseList.length>0" class="CourseList">
				<view class="Course_item" v-for="(item,index) in CourseList" :key="index"
					@click="handleCourseDetail(item,index)">
					<view class="Course_item_left">
						<image :src="item.defaultCoverAddress" mode="aspectFill"></image>
						<image v-if="item.chapterType == 1" class="videozz"
							src="https://mp.blrwworkshop.com/imgs/videoimg.png" mode="">
						</image>
					</view>
					<view class="Course_item_Content">
						<view class="name dot">
							{{item.chapterName}}
						</view>
						<view class="desc dot">
							<u-parse :content="item.chapterIntro"></u-parse>
						</view>
						<view class="progressBox">
							<view class="progres">
								<u-line-progress :percentage="item.progress || 0"
									:activeColor="role == 1 ? '#FFA116' : '#41C76F'"
									:showText="false"></u-line-progress>
							</view>
							<view class="" :class="role == 1 ? 'color_student' : 'color_parent'">
								{{item.progress ||0 }}%
							</view>
						</view>
					</view>
					<view class="lastimg">
						<image v-if="item.isLatestWatched ==1 && role ==1 && item.progress !=100"
							src="https://mp.blrwworkshop.com/imgs/lastimg.png" mode="">
						</image>
						<image v-if="item.isLatestWatched ==1 && role ==2  && item.progress !=100"
							src="https://mp.blrwworkshop.com/imgs/lastimgs.png" mode="">
						</image>
						<image v-if="item.progress ==100" src="https://mp.blrwworkshop.com/imgs/ykw.png" mode="">
						</image>
					</view>
				</view>
			</view>

			<view v-else class="dataNull">
				<image
					:src="role==1?'https://mp.blrwworkshop.com/imgs/dataNull.png':'https://mp.blrwworkshop.com/imgs/dataNulls.png'"
					mode=""></image>
				<view class="">
					暂无课程列表
				</view>
			</view>
		</view>

		<view class="" style="height: 150rpx;"></view>

		<custom-tabbar :current="0" />

		<u-popup :show="BulletinBoardShow" mode="center" bgColor="transparent">
			<view class="BulletinBoardContent">
				<view class="bgContent">
					<image class="closebtn" src="https://mp.blrwworkshop.com/imgs/closebtn.png" mode=""
						@click="BulletinBoardShow = false">
					</image>
					<image class="tabsbg" src="https://mp.blrwworkshop.com/imgs/tabsbg.png" mode=""></image>
				</view>

				<view class="contentBox">
					<view class="title">
						{{BulletinBoard.title || ""}}
					</view>
					<view class="content">
						<u-parse :content="BulletinBoard.content "></u-parse>
					</view>
				</view>

				<view class="KnowBtn" @click="BulletinBoardShow = false">
					知道了
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar.vue';
	import {
		qryAllCarousel,
		qryAnnouncementPopUp
	} from "@/api/api.js"
	import {
		qryChapterList,
		centerDistrict
	} from "@/api/course.js"
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				role: uni.getStorageSync('role'),
				keyword: "",
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList: [],
				pageNum: 1,
				CourseList: [],
				BulletinBoard: null,
				BulletinBoardShow: false,
				total: 0,
				DistrictList: [],


			}
		},
		onShow() {
			this.role = uni.getStorageSync('role')
			this.pageNum = 1
			this.CourseList = []
			this.handleGETcenterDistrict()
			this.handleGetqryChapterList();
			this.handleqryAnnouncementPopUp()
		},
		onLoad() {
			this.handleqryAllCarousel()
		},
		onReachBottom() {
			if (this.CourseList.length < this.total) {
				this.pageNum++
				this.handleGetqryChapterList();
			} else {
				uni.showToast({
					title: '暂无更多课程~',
					icon: 'none'
				});
			}
			// console.log("total", this.total)
		},
		methods: {
			async handleqryAllCarousel() {
				let res = await qryAllCarousel()
				if (res.code == 200) {
					this.bannerList = res.data
				}
			},
			async handleGETcenterDistrict() {
				let res = await centerDistrict()
				this.DistrictList = res.data || []
			},
			async handleqryAnnouncementPopUp() {
				let res = await qryAnnouncementPopUp()
				if (res.code == 200) {
					this.BulletinBoard = res.data || null
					this.BulletinBoardShow = res.data ? true : false
				}
			},
			async handleGetqryChapterList() {
				let res = await qryChapterList({
					pageNum: this.pageNum,
					pageSize: 10,
				})
				if (res.code == 200) {
					this.CourseList = [...this.CourseList, ...res.rows]
					this.total = res.total
				}
			},
			handleCourseDetail(item, index) {
				uni.navigateTo({
					url: `/pages/coursePackage/courseDetail/courseDetail?chapterId=${item.chapterId}`
				})
			},
			handleSubjectList(item) {
				//跳转外联
				if (item.jumpType == 1) {
					uni.navigateTo({
						url: `/pages/homePackage/webView/webView?url=${item.jumpTo}`
					});
				}
				//跳转其他小程序
				if (item.jumpType == 2) {
					uni.navigateToMiniProgram({
						appId: item.jumpTo, // 目标小程序的 AppID
						path: 'pages/bookcase/bookcase?scene=ifwuh', // 可选，跳转的页面路径及参数
						success(res) {
							console.log('跳转成功', res);
						},
						fail(err) {
							console.log('跳转失败', err);
						}
					});
				}


			},
		}
	}
</script>

<style scoped lang="scss">
	.homeContentstudent {
		background-image: url('https://mp.blrwworkshop.com/imgs/homebg.png');
		background-size: 100% 756rpx;
		background-repeat: no-repeat;
	}

	.homeContentparent {
		background-image: url('https://mp.blrwworkshop.com/imgs/homebgs.png');
		background-size: 100% 756rpx;
		background-repeat: no-repeat;
	}

	.homeContent {
		width: 100%;
		min-height: 100vh;
		background-color: #F9F9F9;
		position: relative;
		padding-top: 176rpx;



		.bg-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 756rpx;
			z-index: 0;
		}

		.searchContent {
			position: relative; // 新增
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 99;

			.searchBox {
				width: 614rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				padding: 14rpx 28rpx;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 24rpx;
				color: #CCCCCC;
				display: flex;
				align-items: center;
				position: relative;

				.searchIcon {
					width: 44rpx;
					height: 44rpx;
				}

				.searchBtn {
					width: 126rpx;
					height: 72rpx;
					// background: #FFA116;
					border-radius: 36rpx;
					width: 126rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 72rpx;
					text-align: center;
					position: absolute;
					right: -10rpx;
				}
			}

			.news_content {
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

		}

		.bannnerContent {
			width: 690rpx;
			height: 276rpx;
			background: #FFEED4;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255, 192, 143, 0.19);
			border-radius: 20rpx;
			position: relative; // 新增
			z-index: 99;
			margin: 20rpx auto;

			.swiper {
				image {
					width: 690rpx;
					height: 276rpx;
				}
			}
		}

		.classification {
			width: 690rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			display: flex;
			align-items: center;
			z-index: 9999;

			.classItem {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;


				image {
					width: 96rpx;
					height: 96rpx;
					margin-bottom: 10rpx;
					border-radius: 96rpx;
				}

				.classItem_name {
					text-align: center;
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}


		.myCourse {
			width: 690rpx;
			margin: 20rpx auto;

			.CoursetTitle {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;

				.Title_left {
					display: flex;
					align-items: center;

					.lineIcon {
						width: 8rpx;
						height: 40rpx;
						border-radius: 4rpx;
					}

					.title {
						margin-left: 16rpx;
					}
				}


				.rightimg {

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.CourseList {
				width: 100%;
				margin-top: 20rpx;

				.Course_item {
					width: 100%;
					height: 232rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;
					position: relative;

					.lastimg {
						position: absolute;
						top: 0;
						right: 0;
						width: 158rpx;
						height: 44rpx;
						z-index: 2;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.Course_item_left {
						// background-color: #FFEED4;
						border-radius: 20rpx;
						position: relative;

						.videozz {
							position: absolute;
							top: 0;
							left: 0;
						}

						image {
							width: 264rpx;
							height: 232rpx;
							border-radius: 20rpx;
						}
					}

					.Course_item_Content {
						width: 352rpx;
						margin-left: 26rpx;



						.name {
							font-weight: 600;
							font-size: 32rpx;
							color: #333333;
						}

						.desc {
							font-weight: 400;
							font-size: 24rpx;
							color: #B4B4B4;
							line-height: 34rpx;
							margin-top: 16rpx;
							max-height: 60rpx;
							overflow: hidden;
						}

						.dot {
							width: 100%;
							/* 必须设置固定宽度 */
							white-space: nowrap;
							/* 强制不换行 */
							overflow: hidden;
							/* 隐藏溢出内容 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
						}

						.progressBox {
							width: 100%;
							margin-top: 46rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24rpx;
							color: #FFA116;

							.progres {
								width: 80%;
							}
						}

					}
				}
			}
		}

	}

	.dataNull {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #DDDDDD;
		margin-top: 20rpx;

		image {
			width: 330rpx;
			height: 330rpx;

		}
	}

	.BulletinBoardContent {
		width: 562rpx;
		height: 740rpx;
		position: relative;

		.bgContent {
			width: 562rpx;

			.closebtn {
				width: 48rpx;
				height: 48rpx;
				margin-left: 510rpx;
			}

			.tabsbg {
				width: 562rpx;
				height: 740rpx;
			}
		}

		.contentBox {
			width: 512rpx;
			height: 474rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			position: absolute;
			top: 205rpx;
			left: 26rpx;
			padding: 18rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}

			.content {
				width: 100%;
				margin-top: 10rpx;
				height: 90%;
				overflow: auto;
			}
		}

		.KnowBtn {
			width: 320rpx;
			height: 64rpx;
			background: #FFF9EB;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFA116;
			line-height: 64rpx;
			text-align: center;
			position: absolute;
			bottom: -25rpx;
			left: 50%;
			margin-left: -160rpx;

		}
	}
</style>